<template>
  <n-data-table :columns="columns" :data="data" remote :loading="loading"/>
</template>
<script lang="ts" setup>

import {DataTableColumns} from "naive-ui";
import {BlogComment} from "@/types";
import {blog_comment_get_api} from "@api/blog.ts";
import {renderCommentAction, renderCommentState, renderCommentStateTitle} from "@pages/blog/action.tsx";

const columns: DataTableColumns = [
  {
    title: '作者',
    key: 'author',
    width: 200
  },
  {
    title: '时间',
    key: 'create_time',
    width: 200
  },
  {
    title: '内容',
    key: 'content',
    ellipsis: true,
  },
  {
    title: () => renderCommentStateTitle(changeState),
    key: 'state',
    render: (rowData) => renderCommentState(rowData.state as number),
    width: 150
  },
  {
    title: '操作',
    key: 'action',
    render: (row) => renderCommentAction(row),
    width: 200
  }
]
const data = ref(<BlogComment[]>[])
const loading = ref(false)
const changeState = (state: number) => {
  loadData(state)
}

async function loadData(state?: number) {
  loading.value = true
  data.value = await blog_comment_get_api(state).finally(() => loading.value = false)
}

onMounted(() => {
  loadData()
})

</script>
